<template>
	<el-config-provider :size="getGlobalComponentSize" :locale="zhCn">
		<router-view  />
        <Setings ref="setingsRef" />
	</el-config-provider>
</template>

<script setup lang="ts" name="app">
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
import { Local } from '/@/utils/storage';
import setIntroduction from '/@/utils/setIconfont';

// 引入组件
const Setings = defineAsyncComponent(() => import('/@/layout/navBars/topBar/setings.vue'));

// 定义变量内容
const setingsRef = ref();
const route = useRoute();
const storesThemeConfig = useThemeConfig();

// 获取全局组件大小
const getGlobalComponentSize = computed(() => {
	return other.globalComponentSize();
});
// 设置初始化，防止刷新时恢复默认
onBeforeMount(() => {
	// 设置批量第三方 icon 图标
	setIntroduction.cssCdn();
	// 设置批量第三方 js
	setIntroduction.jsCdn();
});
// 页面加载时
onMounted(() => {
    nextTick(() => {
        // 获取缓存中的布局配置
		if (Local.get('themeConfig')) {
			storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
			document.documentElement.style.cssText = Local.get('themeConfigStyle');
		}
	});
});
// 监听路由的变化，设置网站标题
watch(
	() => route.path,
	() => {
		other.useTitle();
	},
	{
		deep: true,
	}
);
</script>
